<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">
</head>
<body>
<div style="padding: 15px;">
    <form class="layui-form form-position" action="/amin/role/createRole" method="post" id="from-data">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" th:field="${role.roleName}" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input layui-input-width">
                <input type="text" name="id" id="roleId" th:field="${role.id}" style="display: none"   placeholder="请输入" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色序号</label>
            <div class="layui-input-block">
                <input type="text" name="sort" th:field="${role.sort}"  required  lay-verify="required" placeholder="请输入角色序号" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remarks" th:field="${role.remarks}"  required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
                <button type="reset" th:if="${role.id == null}" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
        <div id="roleMenuList" style="margin-bottom: 0;margin-top: 10px;" th:if="${role.id != null}">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单配置</label>
                <div class="layui-input-block">
                    <button data-method="setTop" class="layui-btn">点击配置菜单</button>
                </div>
            </div>
        </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script th:src="@{/ajaxSubmit.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
    layui.use(function(){
        var layer = layui.layer
            ,form = layui.form;

        var href = '/amin/role/roleMenu?id='+$("#roleId").val();
        //触发事件
        var active = {
            setTop: function(){
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '菜单配置'
                    ,area: ['50%', '95%']
                    ,shade: 0
                    ,maxmin: true
                    ,offset: [ //为了演示，随机坐标
                        0,0
                    ]
                    ,content: href
                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero, index){
                        layer.setTop(layero); //重点2. 保持选中窗口置顶
                        //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                        layer.escIndex = layer.escIndex || [];
                        layer.escIndex.unshift(index);
                        //选中当前层时，将当前层索引放置在首位
                        layero.on('mousedown', function(){
                            var _index = layer.escIndex.indexOf(index);
                            if(_index !== -1){
                                layer.escIndex.splice(_index, 1); //删除原有索引
                            }
                            layer.escIndex.unshift(index); //将索引插入到数组首位
                        });
                    }
                    ,end: function(){
                        //更新索引
                        if(typeof layer.escIndex === 'object'){
                            layer.escIndex.splice(0, 1);
                        }
                    }


                });
            }
        };

        $('#roleMenuList .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });


        //多窗口模式 - esc 键
        $(document).on('keyup', function(e){
            if(e.keyCode === 27){
                layer.close(layer.escIndex ? layer.escIndex[0] : 0);
            }
        });
        //监听提交
        form.on('submit(formSubmit)', function(data){
           // $("#form_submit_button_01").attr('disabled',false);
            var url = '/amin/role/dataSubmit';
            var data =$("#from-data").serialize();
            layer.msg('操作成功，正在跳转......');
            ajaxSubmit(url,data,"","");
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.location.reload();
            parent.layer.close(index);
        });
    });
</script>
</html>